import React, { useState, useCallback, useMemo, memo } from 'react'
import { useEffect } from 'react'

export default function App() {
    const [count, setCount] = useState(0);
    const [total, setTotal] = useState(0);
  
    // 没有使用 useMemo，即使是更新 total, countToString 也会重新计算
    const countToString = (() => {
      console.log("countToString 被调用");
      return count.toString();
    })();
  
    // 使用了 useMemo, 只有 total 改变，才会重新计算
    const totalToStringByMemo = useMemo(() => {
      console.log("totalToStringByMemo 被调用");
      return total + "";
    }, [total]);
  
    return (
      <div className="App">
        <h3>countToString: {countToString}</h3>
        <h3>countToString: {totalToStringByMemo}</h3>
        <button
          onClick={() => {
            setCount((count) => count + 1);
          }}
        >
          Add Count
        </button>
        <br />
        <button
          onClick={() => {
            setTotal((total) => total + 1);
          }}
        >
          Add Total
        </button>
      </div>
    );
  }
